<template>
  <div class="ly-radio" :class="classObj" @click="updateVal">
    <span class="ly-radio__input">
      <span class="ly-radio__inner"></span>
    </span>
    <span class="ly-radio__label">
    	<slot></slot>
    </span>
  </div>
</template>
<script>
export default {
  name:'lyRadio',
  props:{
    label:{
      type:[String,Number]
    },
    value: {},
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed:{
    // 判断radioGroup父组件是否存在
    isGroup(){
      let parentCpt = this.$parent
      while (parentCpt) {
        if(parentCpt.$options._componentTag!='ly-radio-group'){
          parentCpt = parentCpt.$parent
        }else{
          this.parentGroup = parentCpt
          return true
        }
      }
      return false
    },
    showGourpOrRadioVal(){
      // 如果adioGroup父组件存在则返回父组件的value
      return this.isGroup?this.parentGroup.value:this.value
    },
    classObj(){
      return {
        'is-checked':this.showGourpOrRadioVal === this.label,
        'is-disabled':this.disabled
      }
    }
  },
  methods:{
    updateVal(){
      if(this.disabled)return
      if(this.isGroup){
        this.$parent.onGroupChange(this.label)
      }
      this.$emit("input",this.label)
    }
  }
}
</script>
<style lang="scss">
  .ly-radio{
    cursor: pointer;
    display: inline-block;
    user-select: none;
    margin-right: 30px;
    .ly-radio__input{
      display: inline-block;
      line-height: 1;
      position: relative;
      .ly-radio__inner{
        position: relative;
        border: 1px solid #c4cad7;
        border-radius: 100%;
        width: 1em;
        height: 1em;
        background: #fff;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        transition: all .3s;
        &:hover {
          border: 1px solid #6575F6;
        }
        &::after{
          content: "";
          width: 0.42em;
          height: 0.42em;
          border-radius: 100%;
          background-color: transparent;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) scale(1);
          transition: all .3s;
        }
      }
    }
    .ly-radio__label {
      display: inline-block;
      vertical-align: middle;
      padding-left: 10px;
    }
    &.is-checked{
      .ly-radio__inner{
        border-color: #6575F6;
        &::after {
          background-color: #6575F6;
        }
      }
    }
    &.is-disabled {
      cursor: default;
      .ly-radio__input {
        border-color: #c4cad7;
      }
      .ly-radio__inner{
        background-color: #ebebeb;
      }
      .ly-radio__label {
        color: #ccc;
      }

      &.is-checked {
        .ly-radio__inner {
          background-color: #fff;
          border-color: #c4cad7;
          &::after {
            background-color: #c2ccdc;
          }
        }
      }
      &:hover{
        .ly-radio__inner{
          border-color: #c4cad7;
          cursor: not-allowed;
        }
      }
    }
  }
</style>